<template>
	<view class="card" v-if="item">
		<view class="flex-row justify-between">
			<view class="flex-row">
				<image style="width: 110rpx;height: 110rpx;border-radius: 100%;"
					:src="item.avatarUrl||'https://wechat-pictures-1301970825.file.myqcloud.com/wxapp/fgzhd/user/img_morentouxiang.png'"
					mode=""></image>
				<view class="name">
					{{item.name||''}}
				</view>
			</view>
			<view class="please">
				←→请滑动打分
			</view>
		</view>
		<view class="" v-for="(dim,index) in item.reqs">
			<view class="flex-row" style="margin-top: 24rpx;margin-bottom: 75rpx;">
				<view class="title-sign">

				</view>
				<view class="title">
					{{dim.name||'内容'}}
				</view>
			</view>
			<seekbar :dimId="dim.id" v-model="dim.score" :actualMax="dim.maxScore" :use-slot="false" @input="endSlider">
			</seekbar>
			<view class="line">

			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			// 当前进度百分比值，范围0-100
			item: {
				type: [Object],
				default: {}
			},
		},
		name: "score-card",
		data() {
			return {

				value: 0
			};
		},
		methods: {
			endSlider(e, id) {
				this.$emit('update-item', this.item);
			},
		}
	}
</script>

<style scoped>
	@import url("/common/css/common.css");

	.card {
		background: #FFFFFF;
		box-shadow: 0rpx -6rpx 12rpx 0rpx rgba(191, 191, 191, 0.2);
		border-radius: 20rpx;
		padding: 24rpx;
		margin-top: 30rpx;
	}

	.name {
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 110rpx;
		margin-left: 24rpx;
	}

	.please {
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #959AAF;
		line-height: 110rpx;
	}

	.title-sign {
		width: 10rpx;
		height: 24rpx;
		background: #06BB7C;
		border-radius: 2rpx;
		margin-top: 7rpx;
		margin-right: 10rpx;
	}

	.title {
		font-size: 38rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}

	.line {
		height: 1rpx;
		border: 2rpx solid #EFF0F5;
		margin-top: 20rpx;
	}
</style>